// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import { CacheImage } from 'react-native-rn-cacheimage';


// antd 按需加载
import { } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { } from './module.js'

// 引入样式
import Styles from './style.js';

// 引入公用组件
import { } from '../../components/index.js'

// 引入专用组件
import { } from '../../components/index.js'

// 引入专用组件
import { press } from '../../util/utils'
import { iconSjk, nblogo, merchantsDefault } from '../../util/images.js'


class Merchants extends Component {
	static propTypes = {

	}

	constructor(props) {
		super(props)
		this.state = {}
	}

	getTkYhq() {
		const { data } = this.props
		return data.qyk && data.qyk.map((item, index) => {
			return item.yhq_list.map((yhq, yhqIndex) => {
				return (
					<View
						key={index}
						style={{
							flexDirection: 'row',
							alignItems: 'center',
							marginBottom: 5,
						}}>
						<View style={{
							paddingVertical: 2,
							paddingHorizontal: 4,
							backgroundColor: 'red',
							borderRadius: 4
						}}>
							<Text style={{ fontSize: 12, color: '#fff', lineHeight: 14, }}>{yhq.type_1}</Text>
						</View>
						<Text style={{ fontSize: 12, color: '#61676F', lineHeight: 14, marginLeft: 5 }}>{yhq.yhq_title}</Text>
					</View>
				)
			})
		})
	}

	render() {
		const { data } = this.props
		return (
			<TouchableOpacity
				style={{
					flexDirection: 'row',
					alignItems: 'flex-start',
					paddingVertical: 15,
					paddingHorizontal: 15,
					borderBottomColor: '#f4f4f4',
					borderBottomWidth: .5,
				}}
				onPress={() => {
					Actions.merchants({ shopnum: data.shopnum })
				}}
			>
				<CacheImage
					resizeMode='cover'
					style={{
						width: 70,
						height: 70,
						borderRadius: 6,
						overlayColor: '#fff'
					}}
					source={{ uri: `${data.storeLogo}?x-oss-process=image/resize,w_100,h_100,limit_0` }}
					// loadingIndicatorSource={merchantsDefault}
					defaultSource={merchantsDefault}
				/>
				<View style={{
					flex: 1,
					marginLeft: 15,
				}}>
					<Text style={{ fontSize: 16, color: '#000', lineHeight: 20, }}>{data.storeName}</Text>
					<View style={{
					}}>
						<View style={{
							marginTop: 8,
							flexDirection: 'row',
							alignItems: 'center',
							flexWrap: 'wrap',
						}}>
							{data.storeTag && data.storeTag.map((item, index) => {
								return (
									<View
										key={index}
										style={{
											paddingVertical: 2,
											paddingHorizontal: 4,
											backgroundColor: item.split('@')[1],
											borderRadius: 4,
											marginRight: 8,
											marginBottom: 10,
										}}>
										<Text style={{ fontSize: 12, color: '#fff', lineHeight: 14, }}>{item.split('@')[0]}</Text>
									</View>
								)
							})}
						</View>
						<View style={{
							flexDirection: 'row',
							alignItems: 'center',
						}}>
							<Text style={{ fontSize: 12, color: '#61676F', lineHeight: 14, marginRight: 10 }}>人均￥{data.capitaConsumption}</Text>
							{/* <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 14, }}>距离{data.distance}</Text> */}
						</View>
					</View>

					<View style={{
						paddingTop: 10,
						paddingBottom: 10,
						flexDirection: 'row',
						borderBottomColor: '#f4f4f4',
						borderBottomWidth: .5,
					}}>
						<Image resizeMode='cover' style={{
							width: 40,
							height: 40,
							borderRadius: 4,
							backgroundColor: 'red'
						}} source={require('../../static/images/icon-hmtk.png')} />
						<View style={{
							flex: 1,
							marginLeft: 10,
						}}>
							{this.getTkYhq()}
						</View>
					</View>
					{/* <View style={{
						paddingTop: 10,
						flexDirection: 'row',
					}}>
						<Image resizeMode='cover' style={{
							width: 40,
							height: 40,
							borderRadius: 6,
							overflow: 'hidden'
						}} source={iconSjk} />
						<View style={{
							flex: 1,
							marginLeft: 10,

						}}>
							{
								data.qyk && data.qyk.yhq_list && data.qyk.yhq_list.map((item, index) => {
									return (
										<View
											key={index}
											style={{
												flexDirection: 'row',
												alignItems: 'center',
												marginBottom: 5,
											}}>
											<View style={{
												paddingVertical: 2,
												paddingHorizontal: 4,
												backgroundColor: 'red',
												borderRadius: 6
											}}>
												<Text style={{ fontSize: 12, color: '#fff', lineHeight: 14, }}>{item.type_1}</Text>
											</View>
											<Text style={{ fontSize: 12, color: '#61676F', lineHeight: 14, marginLeft: 5 }}>{item.yhq_title}</Text>
										</View>
									)
								})
							}
						</View>
					</View> */}
				</View>
			</TouchableOpacity>
		)
	}
}

export default pureRender(Merchants)
